<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >

    <title>Hello, world!</title>
</head>
<body>


<div id="app">

    <table class="table">
        <thead>
        <tr>
            <th>borrowid</th>
            <th>书籍号</th>
            <th>借阅者id</th>
            <th>借阅时间</th>
            <th>应还时间</th>
            <th>实际归还时间</th>

        </tr>
        </thead>
        <tbody>
        <tr v-for="item in libList" :key="item.borrow_id">
            <td>{{item.borrow_id}}</td>
            <td>{{item.b_ISBN}}</td>
            <td>{{item.c_id}}</td>
            <td>{{item.borrow_time}}</td>
            <td>{{item.return_time}}</td>
            <td>{{item.actual_return_time}}</td>
        </tr>
        </tbody>
    </table>


</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>


    const eduMap = {

    };

    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data(){
            return {
                eduMap, //此写法 等同 eduMap ：eduMap
                libList:[],

            };
        },

        //定义方法
        methods:{

        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted(){
            //向服务端接口http://localhost:8080/jd_demo_server_war_exploded/lib/libList，发出get请求
            const loadIdx = layer.load();
            myAxios.get('/lib/libList').then((response)=>{
                layer.close(loadIdx);
                this.libList = response.data.data;
            });
        }
    };

    Vue.createApp(app).mount('#app')

</script>



</body>
</html>